<template>
  <div class="app-container">
    <div class="shell">
        <div class="content">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <div class="main-content">
      <div style="display:flex; align-items: flex-start; grid-gap: 10px;">

      <div style="width: 150px"></div>

<!-- 左侧博客栏 -->
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['consultation:consultation:add']"
        >新增</el-button>
      </el-col>
      <div style="flex: 1;" class="card">

        <div class="blog-box" v-for="(item,index) in tableData" :key="index" @click="go(item)">

          <div style="flex: 1; width: 0;">
            <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px;">{{ item.title }}</div>
            <div class="line1" style="color: #666; margin-bottom: 10px; font-size: 13px">{{ item.descr }}</div>
            <div style="display: flex">
              <div style="flex: 1; font-size: 13px;">
                <span style="color: #666; margin-right: 20px;"><i class="el-icon-user"></i>默认用户{{ item.userName }}号</span>
                <span style="color: #666; margin-right: 20px;"><i class="el-icon-eye"></i>{{ item.readCount }}</span>
              </div>
              <div style="width: fit-content;" v-for="(tag,index) in item.tags" :key="index">
                <el-tag type="primary" style="margin-right: 10px;">{{ tag }}</el-tag>
              </div>
            </div>
          </div>

          <div style="width: 150px;">
            <img style="width: 100%; height: 80px; border-radius: 5px;" src="./image/1.jpg" alt="">
          </div>

        </div>


        

        <div style="margin-top: 10px;" v-if="total">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5,10,20]"
            :pagesize="pageSize"
            layout="total,prev,pager,next"
            :total="total">
          </el-pagination>
        </div>

      </div>

<!-- 右侧分类栏 -->
      <div style="width: 260px;" class="card">
        <div class="category-item" :class="{'category-item-active':item.name === current}" 
        v-for="item in categoryList" :key="item.id" @click="selectCategory(item.id)">{{ item.name }}</div>
      </div>
    </div>
    </div>
  </div>
</template>


<script>
import { listInfectiousnews, getInfectiousnews, delInfectiousnews, addInfectiousnews, updateInfectiousnews } from "@/api/infectiousnews/infectiousnews";
import { listConsultation, getConsultation, delConsultation, addConsultation, updateConsultation } from "@/api/consultation/consultation";
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/category/category";
import {toRaw} from 'vue'

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.4",
      categoryList:[{name:'全部疾病'},{name:'新型冠状病毒'},{name:'流感'}],
      current:null,
      imgurl:['./image/1.jpg','./image/2.jpg','./image/3.jpg','./image/4.png',],
      tableData:[],//所有的数据
      pageNum: 1,//当前的页码
      pageSize: 10,//每页显示的个数
      total: 0,
      tags:[],
      form: {}
    };
  },
  mounted(){
    let tag = []
    this.load()
    this.loadBlogs(1)
    console.log(tag)
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    load(){
      //请求分类的数据
      listCategory({
        pageNum: 1,
        pageSize: 10,
        name: null
      }).then(response => {
        this.categoryList = response.rows || [];
        this.categoryList.unshift({name:'全部疾病'})
      });
      // this.$request.get('').then(res => {
      //   this.categoryList = res.data || []
      //   this.categoryList.unshift({name:'全部博客'})
      // })
    },
    selectCategory(categoryId){
      this.current = categoryId
      this.loadBlogs(1)
      console.log(this.tableData[0])
    },
    //请求博客数据
    loadBlogs(pageNum){
      if (pageNum) this.pageNum = pageNum
      listConsultation({
        pageNum: 1,
        pageSize: 10,
        title: null,
        content: null,
        descr: null,
        cover: null,
        tags: null,
        userId: null,
        publishDate: null,
        readCount: null,
        categoryId: this.current
      }).then(response => {
        console.log(response.rows)
        let responseRows = response.rows;
        responseRows.forEach(item => {
          item.tags = item.tags.split(',');
        });
        this.tableData = response.rows;
        this.total = response.total || [];
      });
      // this.$request.get('',{
      //   params:{
      //     pageNum:this.pageNum,
      //     pageSize:this.pageSize,
      //     categoryName:this.current === '全部博客' ? null : this.current,
      //   }
      // }).then(res => {
      //   this.tableData = res.data?.list
      //   this.total = res.data || []
      // })

    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    go(item) {
      updateConsultation({
        id: item.id,
        readCount: item.readCount + 1 
      })
      this.$router.push({
        name: 'conten', // 路由名称
        params: { id: item.id }, // 参数，可以是item的一个属性，用于在新页面中识别是哪个item
      });
    },
    trans(tags){
      this.tags = tags.split(',')
      console.log(this.tags)
    },
    //发表帖子按钮
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加质询信息";
    },
    reset() {
      this.form = {
        id: null,
        title: null,
        content: null,
        descr: null,
        cover: null,
        tags: null,
        userName: null,
        publishDate: null,
        readCount: null,
        categoryId: null
      };
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
//轮播图
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100vh;
            background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
            overflow: hidden;
        }

        /* 定义外层容器样式 */
        .shell {
            position: relative;
            /* 相对定位 */
            width: 80vw;
            /* 宽度占视口宽度的60% */
            height: 40vw;
            /* 高度占视口高度的40% */
            max-width: 800px;
            /* 最大宽度为380像素 */
            max-height: 250px;
            /* 最大高度为250像素 */
            margin: 10px auto;
            /* 外边距为0 */
            color: white;
            /* 字体颜色为白色 */
            perspective: 1000px;
            /* 透视效果，观察者与z=0平面的距离 */
            transform-origin: center;
            /* 变形原点为中心 */
        }

        /* 定义内容容器样式 */
        .content {
            display: flex;
            /* 设置为弹性盒子布局 */
            justify-content: center;
            /* 主轴居中对齐 */
            align-items: center;
            /* 交叉轴居中对齐 */
            position: absolute;
            /* 绝对定位 */
            width: 100%;
            /* 宽度100% */
            height: 100%;
            /* 高度100% */
            transform-origin: center;
            /* 变形原点为中心 */
            transform-style: preserve-3d;
            /* 保持3D变换 */
            transform: translateZ(-30vw) rotateY(0);
            /* 变换：沿z轴平移-30vw，绕y轴旋转0度 */
            animation: carousel 9s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
            /* 动画：名称为carousel，持续时间9秒，无限循环，缓动函数为cubic-bezier(0.77, 0, 0.175, 1)，动画结束后保持最后状态 */
        }

        /* 定义项目样式 */
        .item {
            position: absolute;
            /* 绝对定位 */
            width: 80vw;
            /* 宽度占视口宽度的60% */
            height: 40vw;
            /* 高度占视口高度的40% */
            max-width: 500px;
            /* 最大宽度为380像素 */
            max-height: 250px;
            /* 最大高度为250像素 */
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            /* 设置阴影 */
            border-radius: 6px;
            /* 边框圆角半径为6像素 */
            background-size: cover;
            /* 背景图片等比例缩放并覆盖整个容器 */
            -webkit-box-reflect: below 25px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
            /* 创建倒影效果 */
        }

        /* 第一个项目样式 */
        .item:nth-child(1) {
            background-image: url(./image/1.jpg);
            /* 背景图片为01.jpg */
            transform: rotateY(0) translateZ(35vw);
            /* 变换：绕y轴旋转0度，沿z轴平移35vw */
        }

        /* 第二个项目样式 */
        .item:nth-child(2) {
            background-image: url(./image/2.jpg);
            /* 背景图片为02.jpg */
            transform: rotateY(120deg) translateZ(35vw);
            /* 变换：绕y轴旋转120度，沿z轴平移35vw */
        }

        /* 第三个项目样式 */
        .item:nth-child(3) {
            background-image: url(./image/3.jpg);
            /* 背景图片为03.jpg */
            transform: rotateY(240deg) translateZ(35vw);
            /* 变换：绕y轴旋转240度，沿z轴平移35vw */
        }

        /* 定义动画 */
        @keyframes carousel {

            0%,
            17.5% {
                transform: translateZ(-35vw) rotateY(0);
                /* 变换：沿z轴平移-35vw，绕y轴旋转0度 */
            }

            27.5%,
            45% {
                transform: translateZ(-35vw) rotateY(-120deg);
                /* 变换：沿z轴平移-35vw，绕y轴旋转-120度 */
            }

            55%,
            72.5% {
                transform: translateZ(-35vw) rotateY(-240deg);
                /* 变换：沿z轴平移-35vw，绕y轴旋转-240度 */
            }

            82.5%,
            100% {
                transform: translateZ(-35vw) rotateY(-360deg);
                /* 变换：沿z轴平移-35vw，绕y轴旋转-360度 */
            }
        }

//主体部分
.main-content{
  margin-top: 200px;
}

.card {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
}

.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  font: #0a0a0a;
  cursor: pointer;
}

.category-item-active {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px;
}

.line1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}

.blog-box {
  display: flex; 
  grid-gap: 15px; 
  padding: 10px 0; 
  border-bottom: 1px solid #DDD; 
}

.blog-box:first-child {
  padding-top: 0;
}
</style>